<!-- 区划管理列表 -->
<template>
	<RkContainer :isFooter="false" :isAside="isAside">
		<template #header_left></template>
		<template #header_right>
			<el-button type="primary" @click="handleAdd">新增</el-button>
			<el-button @click="handleRefreshCache">刷新缓存</el-button>
		</template>
		<template #aside>
			<RkAdAgTree
				ref="rkAdAgTreeRef"
				:isAdTree="true"
				:adTreeHidden="false"
				:agTreeHidden="true"
				@adNodeClick="handleAdNodeClick"
				@adCurrentChange="handleAdNodeChange"
				@toggleHidden="(hidden) => (isAside = !hidden)"
			/>
		</template>
		<template #main>
			<rk-center>
				<template #content>
					<rk-grid
						ref="tableGridRef"
						dataUrl="/eleAd/eleAdGridData"
						:boxConfig="false"
						:params="queryParams"
						:title="route.meta.title"
						:columns="tableColumns"
					>
						<template #toolbar_title_buttons> </template>
						<template #operation="{ row }">
							<el-dropdown>
								<span class="el-dropdown-link">
									更多操作
									<el-icon class="el-icon--right">
										<arrow-down />
									</el-icon>
								</span>
								<template #dropdown>
									<el-dropdown-menu>
										<el-dropdown-item @click.stop="handleEdit(row)">修改</el-dropdown-item>
										<el-dropdown-item @click.stop="handleOperation('delete', '删除', row)">删除</el-dropdown-item>
										<el-dropdown-item v-if="row.status == 1" @click.stop="handleUse(row)">停用</el-dropdown-item>
										<el-dropdown-item v-if="row.status == 2" @click.stop="handleUse(row)">启用</el-dropdown-item>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
						</template>
					</rk-grid>
				</template>
			</rk-center>
		</template>
		<ad-add-edit ref="adAddEditRef" @refresh="handleRefresh"></ad-add-edit>
		<ad-open-stop ref="adOpenStopRef" @refresh="handleSearch"></ad-open-stop>
	</RkContainer>
</template>

<script setup>
import { ElMessage, ElLoading } from 'element-plus';
import { useRoute } from 'vue-router';
import { operationColumn } from '@/config/column-config.js';
import { useContainerAside } from '@/hooks';
import { useUserStore } from '@/stores/modules';
import AdAddEdit from './modal/AdAddEdit.vue';
import { RkConfirmBox } from '@/components/message-box';
import AdOpenStop from './modal/AdOpenStop.vue';
import { ArrowDown } from '@element-plus/icons-vue';
import { useZoningApi } from '@/api/index';
const { refreshEleAdCache, deleteEleAd, eleAdInfo } = useZoningApi();

const userInfo = useUserStore().userInfo;
// 获取当前路由
const route = useRoute();
// ----- 树结构操作
const { isAside } = useContainerAside();
const tableGridRef = ref();
// ----- 表格相关操作
const queryParams = reactive({
	code: userInfo.adCode,
});

// 新增项目面板模板引用
const adAddEditRef = ref();
//传值方法
const treeParams = reactive({
	guid: '',
	name: userInfo.adName,
});

provide('treeParams', treeParams);
const tableColumns = ref([
	{ field: 'code', title: '区划编码', sortable: true, width: 200, align: 'left' },
	{ field: 'name', title: '区划名称', sortable: true, width: 250, align: 'left' },
	{ field: 'alias', title: '简称', sortable: true, width: 180, align: 'left' },
	{ field: 'czCode', title: '财政区划', sortable: true, width: 200, align: 'left' },
	{ field: 'tjCodeName', title: '统计区划', sortable: true, width: 200, align: 'left' },
	{
		field: 'status',
		title: '状态',
		width: 120,
		align: 'center',
		cellRender: { name: 'enumsRender', enumName: 'USER_STATUS_ENUMS', isTag: true },
	},
	{ field: 'starttime', title: '生效时间', sortable: true, width: 120, align: 'center' },
	{ field: 'endtime', title: '失效时间', sortable: true, width: 120, align: 'center' },
	operationColumn(),
]);
// 区划树变化触发
const handleAdNodeChange = (data, treeNode) => {
	const { id, code, name, text, parentId, leaf } = data;
	queryParams.code = code;
	treeParams.guid = id;
	treeParams.name = text;
};
const handleAdNodeClick = (data) => {
	const { id, code, name, text, parentId, leaf } = data;
	queryParams.code = code;
	treeParams.guid = id;
	treeParams.name = text;
	handleSearch();
};

/**提交刷新 */
const rkAdAgTreeRef = ref();
const handleRefresh = () => {
	//刷新区划树
	rkAdAgTreeRef.value.reloadAdTreeData();
	handleSearch();
};
/**查询 */
const handleSearch = () => {
	tableGridRef.value.searchEvent();
};

/**刷新缓存 */
const handleRefreshCache = async () => {
	const result = await refreshEleAdCache();
	const { data, code, msg } = result;
	if (code === 200) {
		ElMessage({ message: `刷新缓存数据成功！`, type: 'success' });
		handleSearch();
	} else {
		ElMessage({ message: `操作失败！`, type: 'warning' });
	}
};

//  删除
const handleOperation = async (buttonType, textName, row) => {
	//获取选中数据
	const { guid } = row;
	let loading = null;
	RkConfirmBox({
		title: '提示',
		content: `您确定要${textName}选择数据吗？`,
		onSubmit: async function () {
			//获取选中数据
			loading = ElLoading.service({ fullscreen: true, text: textName + '中,请稍等..' });
			const deleteParams = { guids: guid };
			const result = await deleteEleAd(deleteParams);
			const { data, code, msg } = result;
			if (code === 200) {
				loading.close();
				ElMessage({ message: `${textName}成功！`, type: 'success' });
				handleRefresh();
			} else {
				loading.close();
				ElMessage({ message: `${msg}`, type: 'error' });
			}
		},
		onCancel: function () {},
	});
};
// 获取详情
const getDetailInfo = async (guid) => {
	const result = await eleAdInfo({ guid });
	const { data, code, msg } = result;
	if (code === 200) {
		adAddEditRef.value.handleOpen({ model: 'edit', echoForm: data });
	}
};

// 新增项目
const handleAdd = () => {
	adAddEditRef.value.handleOpen({ model: 'add' });
};

//编辑
const handleEdit = (row) => {
	getDetailInfo(row.guid);
};

// 启用停用
const adOpenStopRef = ref();
const handleUse = async (row) => {
	//获取选中数据
	adOpenStopRef.value.handleOpen(row);
};
</script>

<style lang="scss" scoped></style>
